<template>
    <div class="recommendList">
        <div class="listTop">
            推荐歌单
            <van-icon name="arrow" />
        </div>
        <div class="listItems">
            <van-swipe :loop="false" :width="150" :show-indicators="false">
                <van-swipe-item class="listItem" v-for="item in store.state.recommendList" :key="item.id"
                    @click="goMusicListDetail(+item.id)">
                    <div class="listPic">
                        <div class="play">
                            <van-icon name="play" />
                            {{ changeCount(+item.playCount) }}
                        </div>
                        <img :src="item.picUrl" alt="">
                    </div>
                    <div class="listName">
                        {{ item.name }}
                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>

<script lang='ts' setup>
import router from '@/router';
import store from '@/store';
import { onMounted } from 'vue'
onMounted(async () => {
    let res = await store.dispatch('getRecommendList')
    if (res.data.code === 200) {
        store.commit('updateRecommendList', res.data.result)
    }
})
/* 播放量单位转换 */
const changeCount = (num: number) => {
    if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
    } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
    }
}
/* 跳转至歌单详情页 */
const goMusicListDetail = (id: number) => {
    router.push({ path: '/musiclistdetail', query: { id: id } })
}
</script>
 
<style lang = "less" scoped>
.recommendList {
    margin-top: 0.2rem;

    .listTop {
        font-weight: 900;
    }

    .listItems {
        height: 4rem;
        margin-top: 0.2rem;

        .listItem {
            display: flex;
            flex-direction: column;
            align-items: center;

            .listPic {
                margin-right: 0.2rem;
                position: relative;

                .play {
                    position: absolute;
                    top: 2%;
                    right: 5%;
                    color: #fff;
                }

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 0.2rem;
                }
            }


            .listName {
                width: 90%;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }


    }
}
</style>